<script setup lang="ts">
import { BasicColumn, BasicTable, TableAction } from '@/components/Table';
import { BasicForm, FormSchema, useForm } from '@/components/Form';
import { h, ref, reactive } from 'vue';
import { configList } from '@/api/website/index';
import addModal from './modal/add.vue';
const addModalRef = ref(null);
const columns: BasicColumn[] = [
  {
    title: 'id',
    key: 'id',
    width: 100,
  },
  {
    title: '客户名称',
    key: 'name',
    width: 190,
  },
	{
	  title: '手机号',
	  key: 'phone',
	  width: 190,
	},
	{
	  title: '配置域名',
	  key: 'domin',
	  width: 190,
	},
	{
	  title: '添加时间',
	  key: 'created_at',
	  width: 190,
	}
];
const schemas: FormSchema[] = [
  {
    field: 'name',
    component: 'NInput',
    label: '客户名称',
    componentProps: {
      placeholder: '请输入客户名称',
    },
  },
  {
    field: 'phone',
    component: 'NInput',
    label: '手机号',
    componentProps: {
      placeholder: '请输入手机号',
    },
  },
  {
    field: 'status',
    component: 'NSelect',
    label: '状态',
    componentProps: {
      placeholder: '请选择状态',
      options: [
        {
          label: '正常',
          value: 't',
        },
        {
          label: '禁用',
          value: 'f',
        },
      ],
      onUpdateValue: (e: any) => {
        // console.log(e);
      },
    },
  },
  {
    field: 'created_time',
    component: 'NDatePicker',
    label: '添加时间',
    componentProps: {
      type: 'daterange',
      clearable: true,
      onUpdateValue: (e: any) => {
        console.log(e);
      },
    },
  },
];
const actionRef = ref();
const [register, { getFieldsValue }] = useForm({
  gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
  labelWidth: 80,
  schemas,
});
const actionColumn = reactive({
  width: 220,
  title: '操作',
  key: 'action',
  fixed: 'right',
  render(record) {
    return h(TableAction as any, {
      style: 'button',
      actions: [
        {
          label: '编辑',
          onClick: handleEdit.bind(null, record),
        }
      ]
    });
  },
});
const loadDataTable = async (res) => {
	const query = JSON.parse(JSON.stringify(getFieldsValue()));
	if (query.created_time?.[1]) {
	  query.created_time[1] = query.created_time[1] + 86400000;
	}
	return await configList({ ...query, ...res });
};
const handleSubmit = (values) => {
  console.log(values);
  reloadTable();
};
function reloadTable() {
  actionRef.value.reload();
}
const handleReset = (values) => {
  console.log(values);
};
const addPackage = () => {
  addModalRef.value.open({}, 'add');
};
function handleEdit(record) {
  addModalRef.value.open(record, 'edit');
}
</script>

<template>
  <n-card :bordered="false" class="proCard">
		<BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
		  <template #statusSlot="{ model, field }">
		    <n-input v-model:value="model[field]" />
		  </template>
		</BasicForm>
		<div class="flex items-center">
		  <n-button type="primary" @click="addPackage">新增网站配置</n-button>
		  <!--      <n-button type="primary" class="ml-3" @click="addPackage">导出数据</n-button>-->
		</div>
    <BasicTable :columns="columns" :request="loadDataTable" :actionColumn="actionColumn" ref="actionRef" />
		<addModal ref="addModalRef" @update:list="reloadTable" />
  </n-card>
</template>

<style scoped lang="less"></style>
